/** @jsxImportSource @emotion/react */
import {  css, SerializedStyles } from "@emotion/react";
import * as React from "react";
import { Text, LabelText } from "./Text";
// import PropTypes from "prop-types";
import { alpha } from "./Theme/colors";
import { Theme } from "./Theme";
import { useTheme } from "./Theme/Providers";
import {getHeight, focusShadow, ButtonSize} from "./Button";
import { IconAlertCircle, IconChevronDown } from "./Icons";
import { safeBind } from "./Hooks/compose-bind";
import  Switch from "react-switch";
import {ChangeEvent, useEffect, } from "react";
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
import { InputGroupContext } from "./Form";

//输入组件相关的 扩展的部分

export interface InputWrapProps extends React.HTMLAttributes<HTMLDivElement> {
    id?: string;
    children?: React.ReactNode;
}
/**针对没有 <InputLine 来包裹配合的输入组件， 该情形下的InputDatalist <datalist id={`list${uid}`}>出现问题：
 为了避免InputDatalist 因uid缺失导致 多个datalist出现混淆情况
 */
export const InputIdProvider =
    ({
         id,
         children,
         ...other
     }: InputWrapProps) => {
        const uid = React.useId();
        return (
            <InputGroupContext.Provider
                value={{
                    uid,
                }}
            >
                {children}
            </InputGroupContext.Provider>
        );
    };

